<template>
  <div style="padding-top: 20px;">
      <div class="s-table">
          <table class="table" border="1">
            <thead>
              <th style=" width: 13%;">活动名称</th>
              <th style=" width: 13%;">活动名称</th>
              <th style=" width: 50%;">活动页面</th>
              <th style=" width: 10%;">今日充值</th>
              <th style=" width: 14%;">历史充值(不含当日)</th>
            </thead>
            <tbody class="tbody">
              <tr>
                <td class="td1">
                  <div class="text">
                    <p style="font-size:14px;color:#000;">五一书币大放送 </p>
                    <p>充51得11200书币</p>
                    <p> (限充1次) </p>
                  </div>
                </td>
                <td class="td1">
                    <div class="text">
                        <p style="font-size:12px;">2018-04-28 18:00:00</p>
                        <p style="font-size:12px;">2018-05-02 23:59:59 </p>
                    </div>
                  </td>
                
                <td class="td1">
                  <div class="text">
                    <p style="font-size:15px;color:#4cabff;cursor: pointer;">https://c18646.818tu.com/activity/2018050151/index.html?ch=c18646 </p>
                    <p style="color:#ff3333;">[ 火热进行中, 推广前请先测试 ]</p>
                    <p style="cursor: pointer;"><img src="../../../public/img/paste.png" alt="" v-clipboard:copy="message" 　　v-clipboard:success="onCopy" 　　v-clipboard:error="onError">                复制链接 <img style="margin-left:20px;" src="../../../public/img/paste.png" alt="">文字文案 </p>
                  </div>
                </td>
                <td class="td3">
                  <div class="td-div">
                    <h2>￥3213</h2>
                    <p>5笔</p>
                  </div>
                </td>
                <td class="td3">
                  <div class="td-div">
                    <h2>￥3213</h2>
                    <p>5笔</p>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
  </div>
 
</template>
<script>
  export default {
    data() {
      return {
        message: 'https://c18646.818tu.com/activity/2018050151/index.html?ch=c18646'
      };
    },
    methods: {
      onCopy: function (e) {
        alert('复制成功 ' + e.text)
      },
      onError: function (e) {
        alert('复制失败')
      }
    }
  };

</script>
<style scoped>
  /* 表格 */
  .s-table {
    margin-top: 25px;   
    
  }

  .s-table .table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 96%;
    margin: 0px 2%;
    border-color: #cccccc;
  }

  .table>thead {
    font: 14px/40px "微软雅黑";
    background-color: #36a4ff;
    color: #fff;
 
  }

  .table .td1 {
    padding:10px 15px;
    font-size: 12px; 
    color: #666666;
  }

  .table .text>p {
    font: 12px/20px "微软雅黑";
  }

  .tbody .td3 .td-div {
    margin: 0 8px;
    text-align: right;
    font-size: 16px;
    color: #666;
  }

  .tbody .td3 .td-div>h2 {
    color: #666;
    font-size: 16px;
  }
</style>